<template>
  <view class="role-container">
    <!-- 搜索区域 -->
    <view class="search-box">
      <view class="search-form">
        <view class="search-item">
          <text class="label">角色名称</text>
          <input v-model="queryParams.roleName" type="text" placeholder="请输入角色名称" @confirm="handleQuery" />
        </view>
        <view class="search-item">
          <text class="label">权限字符</text>
          <input v-model="queryParams.roleKey" type="text" placeholder="请输入权限字符" @confirm="handleQuery" />
        </view>
        <view class="search-item">
          <text class="label">状态</text>
          <picker @change="handleStatusChange" :value="statusIndex" :range="statusOptions" range-key="label">
            <view class="picker-box">
              <text :class="{ 'placeholder': !queryParams.status }">
                {{ statusOptions[statusIndex].label }}
              </text>
              <uni-icons type="bottom" size="12" color="#909399"></uni-icons>
            </view>
          </picker>
        </view>
      </view>
      <view class="btn-group">
        <view class="btn search-btn" @tap="handleQuery">
          <uni-icons type="search" size="14" color="#fff"></uni-icons>
          <text>搜索</text>
        </view>
        <view class="btn reset-btn" @tap="resetQuery">
          <uni-icons type="refresh" size="14" color="#606266"></uni-icons>
          <text>重置</text>
        </view>
        <view class="btn add-btn" @tap="handleAdd">
          <uni-icons type="plusempty" size="14" color="#fff"></uni-icons>
          <text>新增</text>
        </view>
      </view>
    </view>

    <!-- 角色列表 -->
    <view class="role-list" v-if="roleList.length > 0">
      <view v-for="(item, index) in roleList" :key="index" class="role-item">
        <view class="role-info">
          <view class="role-header">
            <view class="role-title">
              <view class="role-tag" :class="{'admin-role': item.admin}">
                {{ item.admin ? '系统角色' : '普通角色' }}
              </view>
              <text class="role-name">{{ item.roleName }}</text>
              <view :class="['status-tag', item.status === '0' ? 'status-normal' : 'status-disabled']">
                {{ item.status === '0' ? '正常' : '停用' }}
              </view>
            </view>
            <view class="role-actions">
              <button class="action-btn view-btn" @tap.stop="handleView(item)">
                <uni-icons type="eye" size="14" color="#909399"></uni-icons>
              </button>
              <button class="action-btn edit-btn" @tap.stop="handleEdit(item)" v-if="!item.admin">
                <uni-icons type="compose" size="14" color="#409eff"></uni-icons>
              </button>
              <button class="action-btn delete-btn" @tap.stop="handleDelete(item)" v-if="!item.admin">
                <uni-icons type="trash" size="14" color="#f56c6c"></uni-icons>
              </button>
            </view>
          </view>
          <view class="role-detail">
            <view class="detail-item">
              <text class="label">权限字符：</text>
              <text class="value">{{ item.roleKey }}</text>
            </view>
            <view class="detail-item">
              <text class="label">显示排序：</text>
              <text class="value">{{ item.roleSort }}</text>
            </view>
            <view class="detail-item">
              <text class="label">数据范围：</text>
              <text class="value">{{ getDataScope(item.dataScope) }}</text>
            </view>
            <view class="detail-item" v-if="item.remark">
              <text class="label">备注：</text>
              <text class="value">{{ item.remark }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 加载更多提示 -->
      <uni-load-more :status="loadMoreStatus" :icon-size="16" :content-text="contentText" />
    </view>

    <!-- 空数据提示 -->
    <view v-else class="empty-box">
      <uni-icons type="info" size="50" color="#999"></uni-icons>
      <text class="empty-text">暂无角色数据</text>
    </view>
  </view>
</template>

<script>
import { listRole, delRole, changeRoleStatus } from '@/api/system/role'

export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      },
      roleList: [],
      loading: false,
      hasMore: true,
      total: 0,
      loadMoreStatus: 'more',
      contentText: {
        contentdown: '上拉显示更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      },
      statusOptions: [
        { label: '全部', value: '' },
        { label: '正常', value: '0' },
        { label: '停用', value: '1' }
      ],
      statusIndex: 0
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    // 获取列表数据
    async getList(type = 'more') {
      if (this.loading) return
      this.loading = true

      try {
        const res = await listRole(this.queryParams)
        if (res.code === 200) {
          const { rows, total } = res

          if (type === 'refresh' || this.queryParams.pageNum === 1) {
            this.roleList = rows
          } else {
            this.roleList = [...this.roleList, ...rows]
          }

          this.total = total
          this.hasMore = this.roleList.length < total
          this.loadMoreStatus = this.hasMore ? 'more' : 'noMore'
        }
      } catch (error) {
        this.loadMoreStatus = 'more'
        uni.showToast({
          title: '获取角色列表失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        if (type === 'refresh') {
          uni.stopPullDownRefresh()
        }
      }
    },

    // 搜索
    handleQuery() {
      this.queryParams.pageNum = 1
      this.roleList = []
      this.hasMore = true
      this.loadMoreStatus = 'more'
      this.getList('refresh')
    },

    // 重置
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
      }
      this.statusIndex = 0
      this.handleQuery()
    },

    // 状态选择改变
    handleStatusChange(e) {
      this.statusIndex = e.detail.value
      this.queryParams.status = this.statusOptions[this.statusIndex].value
    },

    // 新增角色
    handleAdd() {
      uni.navigateTo({
        url: '/pages/system/role/form'
      })
    },

    // 编辑角色
    handleEdit(item) {
      uni.navigateTo({
        url: `/pages/system/role/form?roleId=${item.roleId.toString()}`
      })
    },

    // 查看角色
    handleView(item) {
      uni.navigateTo({
        url: `/pages/system/role/form?roleId=${item.roleId.toString()}&type=view`
      })
    },

    // 删除角色
    handleDelete(item) {
      uni.showModal({
        title: '提示',
        content: `是否确认删除名称为"${item.roleName}"的角色？`,
        success: async (res) => {
          if (res.confirm) {
            try {
              const result = await delRole(item.roleId.toString())
              if (result.code === 200) {
                uni.showToast({
                  title: '删除成功',
                  icon: 'success'
                })
                this.handleQuery()
              }
            } catch (error) {
            }
          }
        }
      })
    },

    // 获取数据范围描述
    getDataScope(scope) {
      const scopeMap = {
        '1': '全部数据权限',
        '2': '自定数据权限',
        '3': '本部门数据权限',
        '4': '本部门及以下数据权限',
        '5': '仅本人数据权限'
      }
      return scopeMap[scope] || '未知权限'
    }
  }
}
</script>

<style lang="scss">
.role-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20rpx;

  .search-box {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);

    .search-form {
      .search-item {
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;

        &:last-child {
          margin-bottom: 0;
        }

        .label {
          width: 140rpx;
          font-size: 28rpx;
          color: #606266;
          font-weight: 500;
        }

        input {
          flex: 1;
          height: 72rpx;
          background-color: #f8f9fa;
          border-radius: 8rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          color: #2c3e50;

          &::placeholder {
            color: #909399;
          }
        }

        .picker-box {
          flex: 1;
          height: 72rpx;
          background-color: #f8f9fa;
          border-radius: 8rpx;
          padding: 0 24rpx;
          font-size: 28rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          text {
            color: #2c3e50;

            &.placeholder {
              color: #909399;
            }
          }

          .uni-icons {
            margin-left: 12rpx;
          }
        }
      }
    }

    .btn-group {
      display: flex;
      gap: 20rpx;
      margin-top: 30rpx;
      padding-top: 30rpx;
      border-top: 2rpx solid #f0f0f0;

      .btn {
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12rpx;
        font-size: 28rpx;
        border-radius: 8rpx;
        transition: all 0.3s;

        &:active {
          transform: scale(0.98);
          opacity: 0.9;
        }

        &.search-btn {
          background-color: #409eff;
          color: #fff;

          &:active {
            background-color: #3a8ee6;
          }
        }

        &.reset-btn {
          background-color: #f5f7fa;
          color: #606266;
          border: 2rpx solid #dcdfe6;

          &:active {
            background-color: #e9e9eb;
          }
        }

        &.add-btn {
          background-color: #67c23a;
          color: #fff;

          &:active {
            background-color: #5daf34;
          }
        }
      }
    }
  }

  .role-list {
    .role-item {
      margin-bottom: 20rpx;

      .role-info {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);

        .role-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .role-title {
            display: flex;
            align-items: center;
            gap: 12rpx;
            flex: 1;

            .role-tag {
              padding: 4rpx 12rpx;
              border-radius: 6rpx;
              font-size: 22rpx;
              background-color: #e6f7ff;
              color: #1890ff;

              &.admin-role {
                background-color: #fff1f0;
                color: #ff4d4f;
              }
            }

            .role-name {
              font-size: 28rpx;
              color: #2c3e50;
              font-weight: 500;
            }

            .status-tag {
              padding: 4rpx 12rpx;
              border-radius: 6rpx;
              font-size: 22rpx;
              margin-left: 8rpx;

              &.status-normal {
                background-color: #f0f9eb;
                color: #67c23a;
              }

              &.status-disabled {
                background-color: #f4f4f5;
                color: #909399;
              }
            }
          }

          .role-actions {
            display: flex;
            gap: 16rpx;

            .action-btn {
              width: 56rpx;
              height: 56rpx;
              padding: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 28rpx;
              background-color: #f8f9fa;
              border: none;

              &:active {
                opacity: 0.8;
              }

              &.view-btn {
                &:active {
                  background-color: #f4f4f5;
                }
              }

              &.edit-btn {
                &:active {
                  background-color: #ecf5ff;
                }
              }

              &.delete-btn {
                &:active {
                  background-color: #fef0f0;
                }
              }
            }
          }
        }

        .role-detail {
          padding-left: 28rpx;

          .detail-item {
            display: flex;
            align-items: center;
            margin-bottom: 12rpx;

            &:last-child {
              margin-bottom: 0;
            }

            .label {
              font-size: 26rpx;
              color: #909399;
              width: 140rpx;
            }

            .value {
              font-size: 26rpx;
              color: #606266;
              flex: 1;
            }
          }
        }
      }
    }
  }

  .empty-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120rpx 0;
    background-color: #fff;
    border-radius: 16rpx;
    margin-top: 24rpx;

    .empty-text {
      margin-top: 24rpx;
      font-size: 28rpx;
      color: #909399;
      letter-spacing: 1rpx;
    }
  }
}
</style>